/* 动画 */

/* 从中间放大 */
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
}

@-webkit-keyframes search-in {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1) translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3) translateX(-10px);
        opacity: 1;
    }
}

@keyframes search-in {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1) translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3) translateX(-10px);
        opacity: 1;
    }
}

@-webkit-keyframes search-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3) translateX(-10px);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

@keyframes search-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3) translateX(-10px);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

/* 字体选中特效 */

@-webkit-keyframes font-tpLink {
    0% {
        /* letter-spacing: 0.1em; */
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes font-tpLink {
    0% {
        /* letter-spacing: 0.1em; */
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}



@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes card-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes card-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes card-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes card-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes card-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@keyframes card-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }
}

@-webkit-keyframes card-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
}

@keyframes card-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
}

@-webkit-keyframes slide-in-bck-center {
    0% {
        -webkit-transform: translateZ(600px);
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slide-in-bck-center {
    0% {
        -webkit-transform: translateZ(600px);
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scale-up-hor-center {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes scale-up-hor-center {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@-webkit-keyframes focus-in-contract-bck {
    0% {
        letter-spacing: 0.5em;
        -webkit-transform: translateZ(300px);
        transform: translateZ(300px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(12px);
        transform: translateZ(12px);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes focus-in-contract-bck {
    0% {
        letter-spacing: 0.5em;
        -webkit-transform: translateZ(300px);
        transform: translateZ(300px);
        -webkit-filter: blur(5px);
        filter: blur(5px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(12px);
        transform: translateZ(12px);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

/* 盒子四周阴影 */
@-webkit-keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
}

@keyframes shadow-drop-2-center {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
        -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    }
}

@-webkit-keyframes page-scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
}

@keyframes page-scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
}

@-webkit-keyframes arrow-top {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0.5;
    }
}

@keyframes arrow-top {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 0.5;
    }
}

@-webkit-keyframes loading-rotate {

    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loading-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes card-in {
    0% {
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes card-in {
    0% {
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@-webkit-keyframes card-out {
    0% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
}

@keyframes card-out {
    0% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
}

@-webkit-keyframes chose-tag {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes chose-tag {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes tag-in {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes tag-in {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes tag-out {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
}

@keyframes tag-out {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: -1;
    }

    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
        z-index: -99;
    }
}

@-webkit-keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

@keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

@-webkit-keyframes cardLine-in {
    0% {
        width: 0%;
        opacity: 50%;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

@keyframes cardLine-in {
    0% {
        width: 0%;
        opacity: 50%;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

@-webkit-keyframes cardLine-out {
    0% {
        width: 100%;
        opacity: 1;

    }

    100% {
        width: 0%;
        opacity: 50%;
    }
}

@keyframes cardLine-out {
    0% {
        width: 100%;
        opacity: 1;

    }

    100% {
        width: 0%;
        opacity: 50%;
    }
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@-webkit-keyframes card-rotate-font {
    0% {
        -webkit-transform: translateZ(0) rotateY(0) scale(1);
        transform: translateZ(0) rotateY(0) scale(1);
    }

    50% {
        -webkit-transform: translateZ(500px) rotateY(90deg) scale(1.03);
        transform: translateZ(500px) rotateY(90deg) scale(1.03);
    }

    100% {
        -webkit-transform: translateZ(1000px) rotateY(180deg) scale(1);
        transform: translateZ(1000px) rotateY(180deg) scale(1);
    }
}

@keyframes card-rotate-font {
    0% {
        -webkit-transform: translateZ(0) rotateY(0) scale(1);
        transform: translateZ(0) rotateY(0) scale(1);
    }

    50% {
        -webkit-transform: translateZ(500px) rotateY(90deg) scale(1.03);
        transform: translateZ(500px) rotateY(90deg) scale(1.03);
    }

    100% {
        -webkit-transform: translateZ(1000px) rotateY(180deg) scale(1);
        transform: translateZ(1000px) rotateY(180deg) scale(1);
    }
}

@-webkit-keyframes card-rotate-back {
    0% {
        -webkit-transform: translateZ(0) rotateY(180deg) scale(1);
        transform: translateZ(0) rotateY(180deg) scale(1);
    }

    50% {
        -webkit-transform: translateZ(500px) rotateY(270deg) scale(1.03);
        transform: translateZ(500px) rotateY(270deg) scale(1.03);
    }

    100% {
        -webkit-transform: translateZ(1000px) rotateY(360deg) scale(1);
        transform: translateZ(1000px) rotateY(360deg) scale(1);
    }
}

@keyframes card-rotate-back {
    0% {
        -webkit-transform: translateZ(0) rotateY(180deg) scale(1);
        transform: translateZ(0) rotateY(180deg) scale(1);
    }

    50% {
        -webkit-transform: translateZ(500px) rotateY(270deg) scale(1.03);
        transform: translateZ(500px) rotateY(270deg) scale(1.03);
    }

    100% {
        -webkit-transform: translateZ(1000px) rotateY(360deg) scale(1);
        transform: translateZ(1000px) rotateY(360deg) scale(1);
    }
}


@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
}

@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }
}